<template>
	<div>
		<div class="header">
			<van-cell size="large" >
				<div slot="icon" class="iconko">
					<van-icon name="arrow-left" @click="shangyiji"/>
				</div>
				<div slot="title" class="cellbox" @click="shangyiji">返回</div>
			</van-cell>
			<div class="wenzitis">
				<h2>HELLO !</h2>
				<div>欢迎来到Keyire商城，请登录探索</div>
			</div>
		</div>

		<!-- 表单 -->
		<div class="inputBxo">
			<van-form @submit="onSubmit">
				<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]"  />
				<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
				<div  class="wd">
					<van-button round block type="info" native-type="submit" color="#343434">提交</van-button>
				</div>
			</van-form>
			<div  class="wd">
				<van-button round block plain type="info" color="#343434" @click="zhuc">注册</van-button>
			</div>
			
		</div>
	</div>
</template>

<script>
	import {
		Cell,
		CellGroup
	} from 'vant';
	import {
		Icon
	} from 'vant';
	import {
		Form
	} from 'vant';
	import {
		Field
	} from 'vant';
	import {
		Button
	} from 'vant';
	import {
		Toast
	} from 'vant';
	export default {
		
		data() {
			return {
				username: '',
				password: '',
				kys:'',
			}
		},
		methods: {
			onSubmit(values) {
				// console.log('submit', values);
				// console.log(this.username)
				this.$get(this.$API.USERS_CHECKUSER,{

						  username:this.username,
						  password:this.password
				
				}).then(res=>{
					console.log(res)
					if(res.data.status==200){
						localStorage.setItem('globalData',JSON.stringify(res.data))
						Toast.success({
						  message: '登录成功',
						  duration: 1000
						});
				
						setTimeout(()=>{
							this.$router.push({path:'/home'})
						},1000)
					}else{
						Toast.success({
						  message: '账号~密码错误',
						  duration: 1000
						});
					}
					
				}).catch(err=>{
					console.log(err)
				})
			},
			zhuc(){
				this.$router.push({path:'/register'})
			},
			shangyiji(){
				this.$router.push({path:'/my'})
				
			},
			
		},
		
		components: {
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Form.name]: Form,
			[Field.name]: Field,
			[Button.name]: Button,
			[Toast.name]: Toast
		}

	}
</script>

<style lang="less" scoped>
	@width: 100vw;
	@white: white;

	.header {
		width: @width;
		height: 180px;
		// background-color: #343434;


		.van-cell {
			// background-color: #343434;
			color: black;
			
		}

		.cellbox {
			font-size: 15px;

		}

		.iconko {
			font-size: 20px;
			padding-right: 15px;
		}

		.wenzitis {
			height: 130px;
		    color: @white;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0px 26px;
			box-sizing: border-box;
			line-height: 40px;
			// border-bottom: 1px solid rgba(0,0,0,0.03);
			background-color:#343434;
			>div {
				font-size: 15px;
			}
		}
	}
	.inputBxo{
		width: @width;
		margin-top:20px;
		.wd{
			width: 80vw;
			margin: 30px auto;
		  }
		   .van-cell{margin-bottom: 20px;}
		 .van-cell::after {
		      border-bottom: 1px solid #343434;
		  }
		}
	
</style>
